<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes">
	<title>{$info.company_name|default=''}</title>
	<link rel="stylesheet" href="/public/static/mobile/css/base.css" />
	<link rel="stylesheet" href="/public/static/mobile/css/popup.css" />
	<link rel="stylesheet" href="/public/static/mobile/css/footer.css" />
	<link rel="stylesheet" href="/public/static/mobile/css/swiper.min.css">
	<script src="/public/static/mobile/js/vue.js"></script>
	<script src="/public/static/mobile/js/vue-resource.min.js"></script>
	<script type="text/javascript" src="/public/static/mobile/js/page.js"></script>
	<script src="/public/static/mobile/js/axios.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="/public/static/mobile/js/swiper.min.js"></script>
	<style type="text/css">
		html {
			font-size: 16px;
			position: relative;
		}

		.loadingThree {
			width: 100%;
			height: 12px;
			margin: 0 auto;
			text-align: center;
		}

		.loadingThree span {
			display: inline-block;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background: #ccc;
			-webkit-animation: load 1.04s ease infinite;
		}

		.loadingThree span:last-child {
			margin-right: 0px;
		}

		@-webkit-keyframes load {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0.3;
			}
		}

		.loadingThree span:nth-child(1) {
			-webkit-animation-delay: 0.16s;
		}

		.loadingThree span:nth-child(2) {
			-webkit-animation-delay: 0.32s;
		}

		.loadingThree span:nth-child(3) {
			-webkit-animation-delay: 0.48s;
		}

		.topLogo {
			width: 2rem;
			margin: auto;
			padding-top: 0.5rem;
		}

		.timeNum {
			padding-top: 1rem;
			width: 100%;
			height: auto;
			text-align: center;
			box-sizing: border-box;
			font-size: 0.32rem;
		}

		.timeNum .num {
			width: 0.8rem;
			height: 0.8rem;
			line-height: 0.8rem;
			margin: auto;
			text-align: center;
			background-color: rgba(57, 75, 143, 0.0);
			border-radius: 50%;
			color: #394B8F;
		}

		.textLogo {
			width: 3.8rem;
			height: auto;
			text-align: center;
			margin: auto;
			padding-top: 0.5rem;
		}

		.imgs {
			width: 100%;
			height: auto;
		}

		.loaddingBox {
			width: 100%;
			height: 100%;
			max-width: 1024px;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #fff;
			z-index: 10;
			margin: auto;
		}



		.mainPage {
			width: 100%;
			height: auto;
		}

		.mainPage .bgBox {
			width: 100%;
			height: 100%;
			/*min-height: 800px;*/
			background-color: #1B1464;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 4;
			background-image: linear-gradient({$info.bg_color1}, {$info.bg_color2});
		}

		.mainPage .contentBoxs {
			width: 100%;
			height: auto;
			position: relative;
			z-index: 5;
			padding: 10px 20px;
			box-sizing: border-box;
		}

		.mainPage .contentBoxs .logoBoxs {
			width: 2rem;
			height: auto;
			margin: auto;
		}

		.mainPage .contentBoxs .boxs1 {
			width: 100%;
			height: auto;
			background-color: #fff;
			border-radius: 10px;
			height: auto;
			margin-top: 10px;
		}

		.mainPage .contentBoxs .boxs1 .titleBoxs {
			width: 100%;
			height: 1.3rem;
			line-height: 1.3rem;
			font-size: 0.5rem;
			color: #2E3192;
			text-align: center;
			letter-spacing: 4px;
			position: relative;
		}

		.mainPage .contentBoxs .boxs1 .titleBoxs:after {
			content: "";
			width: 76%;
			height: 1px;
			position: absolute;
			left: 13%;
			bottom: 0;
			background-color: #E6E6E6;
		}

		.mainPage .contentBoxs .boxs1 .formBox {
			width: 100%;
			height: auto;
			padding: 10px 30px 10px 30px;
			box-sizing: border-box;
		}

		.mainPage .contentBoxs .boxs1 .formBox .rows {
			width: 100%;
			height: auto;
			margin-top: 20px;
		}

		.mainPage .contentBoxs .boxs1 .formBox .labBox {
			width: 100%;
			height: auto;
			font-size: 0.32rem;
			letter-spacing: 4px;
		}

		.mainPage .contentBoxs .boxs1 .formBox .inputBox {
			width: 100%;
			height: 50px;
			box-sizing: border-box;
			margin-top: 5px;
			position: relative;
		}

		.mainPage .contentBoxs .boxs1 .formBox .inputBox .inputs {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			outline: none;
			padding: 0 10px;
			box-sizing: border-box;
			font-size: 0.32rem;
			letter-spacing: 2px;
			border: 1px solid #ccc;
		}

		.mainPage .contentBoxs .boxs1 .formBox .inputBox .sysBox {
			width: 0.5rem;
			height: 100%;
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			padding: 0 10px;
			z-index: 3;
		}

		.mainPage .contentBoxs .boxs1 .formBox .inputBox .getBtn {
			width: 2.5rem;
			height: 100%;
			line-height: 50px;
			font-size: 0.32rem;
			position: absolute;
			top: 0;
			right: 0;
			background-color: #394B8F;
			text-align: center;
			color: #F2F2F2;
			letter-spacing: 5px;
		}

		.mainPage .contentBoxs .boxs1 .formBox .inputBox .getBtn.not {
			background-color: rgba(57, 75, 143, 0.6);
		}

		.mainPage .contentBoxs .boxs1 .formBox .nextBtn {
			text-align: center;
			width: 2rem;
			height: 0.7rem;
			margin: auto;
			background-color: #fff;
			outline: none;
			border: none;
			font-size: 0.3rem;
			letter-spacing: 5px;
			color: #394b8f;
		}

		
		.swiper-container {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;
		}
		.swiper-slide {
			background-position: center;
			background-size: cover;
		}
		.tg{
			line-height: 0.5rem;
			text-align: center;
			top: 0.6rem;
			right: 0.5rem;
			border-radius: 4px;
			border: 1px solid #fff;
			color: #fff;
			position: absolute;
			z-index: 10;
			font-size: 0.28rem;
			padding: 0.03rem 0.2rem;
		}
	</style>
</head>

<body>
	
	<div id="index">
		
		
		
		<!-- <div class="loaddingBox" v-if="ifLoading">
			<div class="topLogo"><img src="/uploads/client/logo/{$info.logo_img}" class="imgs" /></div>
			<div class="timeNum">
				<div class="num">{{second}}</div>
			</div>
			<div class="textLogo"><img src="/uploads/client/logo/{$info.text_img}" class="imgs" v-if="imgShow != 0"/></div>
			<div class="loadingThree">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="footerBox footerBox1">
				<div class="textlogo1"><img src="/uploads/client/logo/{$info.text1_img}" class="imgs"  v-if="imgShow != 0"/></div>
				<div class="text1"  style="color:{$info.font_color|default='#E6E6E6'}">{$info.company_name}</div>
				<div class="text1" style="letter-spacing: 2px;color:{$info.font_color|default='#E6E6E6'}">电话：{$info.company_tel}</div>
				<div class="text1"  style="color:{$info.font_color|default='#E6E6E6'}">地址：{$info.company_addr}</div>
			</div>
		</div> -->

		<div class="loaddingBox" v-if="ifLoading">
			<!-- Swiper v-if="ifLoading"-->
			<div class="swiper-container swiper-container-horizontal swiper-container-fade">
				<div class="swiper-wrapper">
					<!-- <div class="swiper-slide" style="background-image: url(/public/static/mobile/image/guideImg1.jpg); width: 100%; opacity: 1; transform: translate3d(0px, 0px, 0px);"></div> -->
					
					<div class="swiper-slide" v-for="item in lodingImg" :style="'background-image: url(/uploads/banner/'+ item.img +'); width: 100%; opacity:1; transform: translate3d(-414px, 0px, 0px);'"></div>
					<!-- <div class="swiper-slide" style="background-image: url(http://zb.vimap.cn/uploads/banner/20210622/4f9ae40e9e7057046421d501a179f754.jpg); width: 100%; opacity: 0; transform: translate3d(-414px, 0px, 0px);"></div> -->
					
					<!-- <div class="swiper-slide" style="background-image: url(/public/static/mobile/image/guideImg2.jpg); width: 100%; opacity: 0; transform: translate3d(-414px, 0px, 0px);"></div> -->
					<!-- <div class="swiper-slide" style="background-image: url(/public/static/mobile/image/guideImg3.jpg); width: 100%; opacity: 0; transform: translate3d(-828px, 0px, 0px);"></div> -->
					<!-- <div class="swiper-slide" style="background-image: url(images/img-4.jpg); width: 100%; opacity: 0; transform: translate3d(-828px, 0px, 0px);"></div> -->
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination swiper-pagination-white swiper-pagination-clickable swiper-pagination-bullets">
					<span class="swiper-pagination-bullet"></span>
					<!-- <span class="swiper-pagination-bullet"></span> -->
					<!-- <span class="swiper-pagination-bullet"></span> -->
				</div>

				<div class="tg"  v-on:click="tgBtn()">跳过</div>
			</div> 
			<div style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;">
				
				<div class="topLogo" style="position: relative;z-index: 7;" v-if="lodingImg.length<=0"><img src="/uploads/client/logo/{$info.logo_img}" class="imgs" v-if="imgShow != 0"/></div>
				<div class="text1" style="font-size:0.28rem;text-align:center;margin-top: 40%;"  v-if="lodingImg.length<=0">加载中，请稍后</div>
				<div class="loadingThree" v-if="lodingImg.length<=0">
					<span></span>
					<span></span>
					<span></span>
				</div>

				<div class="timeNum" style="position: absolute;bottom: 1rem;z-index: 7;">
					<div class="num" v-if="lodingImg.length>0 || ifSuccessImg">{{second}}</div>
				</div>
			</div>
		</div>



		<div class="mainPage">
			<!-- <div v-for="(item,index) in lodingImg"><img :src="'/uploads/img/'+item.img" width="100%" height="200px"></div> -->
			<div class="contentBoxs">
				<div class="bgBox" :style="{minHeight: winHeight}"></div>
				<div style="position: relative;z-index: 8;">
					<div class="logoBoxs"><img src="/uploads/client/logo/{$info.logo_img}" class="imgs" /></div>
					<div class="boxs1">
						<div class="titleBoxs">售后服务系统</div>
						<div class="formBox">
							<div class="rows">
								<div class="labBox">手机号</div>
								<div class="inputBox"><input class="inputs" type="number" placeholder="" v-model="phone" /></div>
							</div>
							<div class="rows">
								<div class="labBox">产品序列号</div>
								<div class="inputBox" style="position: relative;">
									<input class="inputs" placeholder="" value="" @blur.prevent="changesn()" v-model="proNo"  />
									
									<a href="http://sao315.com/w/api/saoyisao?redirect_uri="  style="position: absolute;width: 0.5rem;top: 0;right: 0;height: 100%;display: flex;align-items: center;padding: 0 0.2rem;">
										<img style="width: 100%;align-items: center; " src="/public/static/mobile/image/sys.png" class="imgs" />
									</a>
									<!-- <input type="file" id="pictureChange"> -->
								</div>
							</div>
							<div class="rows rows1">
								<div class="labBox">验证码</div>
								<div class="inputBox">
									<input class="inputs" placeholder="" v-model="yzm" maxlength="4" />
									<div class="getBtn" v-on:click="throttle(3000)" v-if="count==60">{{count==60 ? '获取验证码' : count+'秒'}}</div>
									<div class="getBtn not" v-if="count!=60">{{count==60 ? '获取验证码' : count+'秒'}}</div>
								</div>
							</div>
							<div style="text-align: center;">
								<button class="nextBtn" v-on:click="nextBtn">下一步</button>
							</div>
						</div>
					</div>
					<div class="footerBox">
					    <div class="textlogo1" style="height:1rem;color:{$info.font_color|default='#E6E6E6'}"><img src="/uploads/client/logo/{$info.text1_img}" class="imgs" v-if="imgShow != 0"/></div>
					    <div class="text1" style="color:{$info.font_color|default='#E6E6E6'}">{$info.company_name|default=''}</div>
					    <div class="text1" style="letter-spacing: 2px;color:{$info.font_color|default='#E6E6E6'}">电话：{$info.company_tel|default=''}</div>
					    <div class="text1"  style="color: {$info.font_color|default='#E6E6E6'}">地址：{$info.company_addr|default=''}</div>
					</div>
				</div>
			</div>
		</div>




		<!--弹窗-->
		<div class='md-cont' v-show='showstate'>
			<div class='md-wrapper'>
				<div class='md-text'>
					<slot name='text'>{{toastMsg}}</slot>
				</div>
			</div>
		</div>

	</div>
</body>
<!-- <script>
	var time="{$info.time|default='3'}";
	window.onload = function() {
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30,
        effect: 'fade',
        loop: false,
        autoplay:time/3*1000
    });
}
</script> -->
<script type="text/javascript">
	var time="{$info.time|default='3'}";
	var imgLength=0;
	new Vue({
		el: '#index',
		data: function () {
			return {
				showstate: false,  //提示窗
				toastMsg: "",   //提示窗的文字
				winHeight: document.documentElement.clientHeight + "px",
				ifLoading: true,
				count: 60,
				//second: 3,//倒计时
				second: time,//倒计时
				phone: "",
				proNo: "{$info.sn}",
				yzm: "",

				info: "",

				sn: "",
				imgShow:0,  //是否显示图片logo

				ifSuccessImg:false,
				lodingImg:[
					// {img:"",},
					// {img:"",},
					// {img:"",}
				],  //加载轮播图
				btnFalge:1,  //获取验证码(1:可获取，0：不可获取)

				lastTime:0 //默认上一次点击时间为0    


			}
		},
		// 创建页面
		created(){
			var _this = this;
			_this.getPage();
		},
		//页面加载需要执行的方法
		mounted: function () {
			var _this = this;
			_this.getLodingImg();
			
		},
		methods: {
			
			// 获取加载轮播图
			getLodingImg:function(){
				var _this=this;
				axios.get('/api/mobile/getBannerList', {
					params: { sn: _this.real_sn }
				})
				.then(function (res) {
					if(res.data.status==1){
						_this.ifSuccessImg=true;  //请求成功改变状态
						console.log("图片：",res.data.data);
						_this.lodingImg=res.data.data;
						_this.$nextTick(function () {
							_this.swipers(res.data.data.length);
							// _this.swipers(0);
							setInterval(_this.threeGo, 1000);
						})
						_this.swipers(res.data.data.length);
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			//sn输入框失去焦点
			changesn:function(){
				var _this = this;
				axios.post('/mobile/login/yzsn.html', {
						phone: _this.phone,        // 参数 手机号
						sn:_this.proNo  //序列号
					})
					.then(function (res) {
						if (res.data.status == 1) {
							
						} else {
							alert(res.data.msg);
						}
					})
					.catch(function (error) {
						console.log(error);
					});
				//console.log(_this.proNo );

			},
			//进入页面倒计时
			threeGo: function () {
				this.second--;
				if (this.second <= 0) {
					//隐藏加载
					this.ifLoading = false
				}
			},
			// 跳过
			tgBtn(){
				this.ifLoading = false;
			},
			//弹窗
			popup: function (msg) {
				var _this = this;
				_this.toastMsg = msg;
				_this.showstate = true;
				setTimeout(() => {
					_this.showstate = false;
				}, 1500);
			},
			// 防止快速点击
			throttle(intervalTime){
				//获取当前时间的时间戳
				let now = new Date().valueOf();
				if(this.lastTime == 0 || (now-this.lastTime) > intervalTime){
					//重置上一次点击时间，intervalTime是我自己设置的间隔时间，根据自己的需要传参
					this.lastTime = now;
					console.log('间隔大于2秒，触发方法');
					this.getYzm();
					//添加自己要调用的方法
				}else{
					console.log('不触发');
				}
			},
			//获取验证码
			getYzm: function () {
				var _this = this;
				// console.log("验证码");
				// return false;
				if (!_this.phone) {
					_this.popup("请填写手机号");
					_this.btnFalge=1;
				} else {
					_this.btnFalge=1;
					axios.post('/mobile/login/getYzm.html', {
						phone: _this.phone,        // 参数 手机号
						sn:_this.proNo  //序列号
					})
						.then(function (res) {
							if (res.data.status == 1) {
								_this.timer = setInterval(() => {
									if (_this.count > 0) {
										_this.count--;
									} else {
										_this.count = 60;
										clearInterval(_this.timer);
										_this.timer = null;
									}
								}, 1000);
							} else {
								_this.popup(res.data.msg);
							}
						})
						.catch(function (error) {
							console.log(error);
						});

				}

				
			},
			//点击下一步
			nextBtn: function () {
				var _this = this;
				if (!_this.phone) {
					_this.popup("请填写手机号");
				} else if (!_this.proNo) {
					_this.popup("请填写产品序列号");
				} else if (!_this.yzm) {
					_this.popup("请填写验证码");
				} else {
					//console.log("手机号："+this.phone+"，产品序列号："+this.proNo+",验证码："+this.yzm);
					axios.post('/mobile/login/login.html', {
						phone: _this.phone,        // 参数 手机号
						proNo: _this.proNo,        // 参数 产品序列号
						yzm: _this.yzm,        // 参数 验证码
					})
						.then(function (res) {
							console.log(res);
							var result = res.data;
							if (result.status == 1) {
								_this.sn = res.data.sn;
								location.href = "/mobile/index/index.html?sn="+res.data.sn+"&type=1&phone="+_this.phone;
								//location.href="operation.html"
							} else {
								_this.popup(result.msg);
								return false;
							}
						})
						.catch(function (error) {
							console.log(error);
						});

				}
			},
			//扫一扫
			sys: function () {
				// console.log("扫一扫");
			},
			// 进入页面
			getPage: function () {
				var _this = this;
				// axios.get('', {

				// })
				// .then(function (res) {
				// 	console.log(res);
				// }).catch(function (error) {
				// 	console.log(error);
				// });
			},
			// 轮播图
			swipers:function(imgLength){
				var swiper = new Swiper('.swiper-container', {
					pagination: '.swiper-pagination',
					paginationClickable: '.swiper-pagination',
					nextButton: '.swiper-button-next',
					prevButton: '.swiper-button-prev',
					spaceBetween: 30,
					effect: 'fade',
					loop: false,
					autoplay:time/imgLength*1000
				});
			}

		},
	})
</script>
<script>
	
	var qr = GetQueryString("qrresult");
	if (qr) {
		alert(qr);
		window.open(qr);
		//$("#result").html(qr);
	}

	function GetQueryString(name) {
		var reg = new RegExp("\\b" + name + "=([^&]*)");
		var r = location.href.match(reg);
		if (r != null) return decodeURIComponent(r[1]);
	}
</script>

</html>